<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SampleDNS</title>
    <meta http-equiv="Refresh" content="120">
</head>
<style>
    table{border-collapse:collapse;}

    #isruning {
        background: #00FF00;
    }

    #notruning {
        background: #FF0000;
    }
</style>

<script src="js/jquery.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
    function appendIndexInfo(dataInfo) {
        var title = "<tr>" +
            "<th class='text-center' scope='col'>ID</th>" +
            "<th class='text-center' scope='col'>域名</th>" +
            "<th class='text-center' scope='col'>资源类型</th>" +
            "<th class='text-center' scope='col'>解析</th>" +
            "<th class='text-center' scope='col'>状态</th>" +
            "<th class='text-center' scope='col'>创建时间</th>" +
            "<th class='text-center' scope='col'>更新时间</th>" +
            "<th class='text-center' scope='col'>备注</th>" +
            "<th class='text-center' colspan='3' scope='col'>操作</th>" +
            "</tr>";
        $(dnsMainTable).append(title);

        dataInfo.forEach(function(dataInfo,id){
            var msg = ""
            if ("暂停解析" == dataInfo.Status) {
                msg =  msg + '<tr  class="bg-danger">';
            } else {
                msg =  msg +  '<tr class="bg-success">';
            }
            var startStopID = "startStop" + dataInfo.ID;
            var funcstartStop = "startStop('" + startStopID + "')";

            var updateDNSInfoID = "updateDNSInfo" + dataInfo.ID;
            var funcupdateDNSInfoID = "updateDNSInfoID('" + startStopID + "')";

            var deleteDNSInfoID = "deleteDNSInfo" + dataInfo.ID;
            var funcdeleteDNSInfoID = "deleteDNSInfoID('" + startStopID + "')";


            msg = msg + '<td>' + dataInfo.ID +  '</td>';
            msg = msg + '<td>' + dataInfo.DomainName +  '</td>';
            msg = msg + '<td>' + dataInfo.Type +  '</td>';
            msg = msg + '<td>' + dataInfo.Ip +  '</td>';
            msg = msg + '<td>' + dataInfo.Status +  '</td>';
            msg = msg + '<td>' + dataInfo.CreateTime +  '</td>';
            msg = msg + '<td>' + dataInfo.UpdateTime +  '</td>';
            msg = msg + '<td>' + dataInfo.Remark +  '</td>';


            buttonmsg = '<td>' + '<button class="btn-info" id="' + startStopID + '" onclick="' + funcstartStop + '" DomanName="' + dataInfo.DomainName + '" ServerKeys="' +dataInfo.ServerKeys +  '" Type="' + dataInfo.Type + '">启用/停用</button></td>'
            buttonmsg = buttonmsg + '<td><button class="btn-warning" id="' + updateDNSInfoID + '" onclick="' + funcupdateDNSInfoID + '" DomanName="' + dataInfo.DomainName + '" ServerKeys="' +dataInfo.ServerKeys +  '" IP="' + dataInfo.IP + '" Remark="'+dataInfo.Remark + '">解析修改</button></td>'
            buttonmsg = buttonmsg + '<td><button class="btn-danger" id="' + deleteDNSInfoID + '" onclick="'+ funcdeleteDNSInfoID + '" DomanName="' + dataInfo.DomainName + '" ServerKeys="' +dataInfo.ServerKeys + '">删除</button>' + '</td>'
            msg = msg + buttonmsg;
            $(dnsMainTable).append(msg);
        })
    }

    $.ajax({
        type: "POST",
        url: "/data",
        sync: false,
        dataType: "JSON",
        success: function (data) {
            if (data.code == 0) {
                var arr = data.data;
                if (arr != null) {
                    appendIndexInfo(arr);
                }
            } else {
                alert("解析数据失败");
            }
        }, error: function (data) {
            alert("解析数据失败");
        }
    })

    function startStop(id) {
        var DomanName = $('#'+id).attr("DomanName");
        var ServerKeys = $('#'+id).attr("ServerKeys");
        var Type = $('#'+id).attr("Type");

        $.ajax({
            type: "POST",
            url: "/status",
            data: {
                'DomainName': DomanName,
                'ServerKeys': ServerKeys,
                'Type': Type
            },
            dataType: "JSON",
            success:function (data) {
                if (data.code == 0) {
                    alert('状态修改成功');
                    window.location.href=window.location.href;
                } else {
                    alert('状态修改失败');
                    window.location.href=window.location.href;
                }
            },error:function (data) {
                alert('修改失败');
            }
        });
    }

    function updateDNSInfoID(id) {
        var DomanName = $('#'+id).attr("DomanName");
        var ServerKeys = $('#'+id).attr("ServerKeys");

        window.location.href="update.html?DomainName=" + DomanName + "&ServerKeys="+ ServerKeys;
    }

    function deleteDNSInfoID(id) {
        var DomanName = $('#'+id).attr("DomanName");
        var ServerKeys = $('#'+id).attr("ServerKeys");

        $.ajax({
            type: "POST",
            url: "del",
            data: {
                'DomainName': DomanName,
                'ServerKeys': ServerKeys
            },
            dataType: "JSON",
            success:function (data) {
                if (data.code == 0) {
                    alert("删除成功");
                    window.location.href=window.location.href;
                } else {
                    alert("删除失败");
                    window.location.href=window.location.href;
                }
            },error:function (data) {
                alert("删除失败");
            }
        });

    }

    function AddDnsInfo() {
        // window.open("add.html");
        window.location.href="add.html";
    }

    function flushCache() {
        $.ajax({
            type: "POST",
            url: "/flush",
            dataType: "JSON",
            success:function (data) {
                if (data.code == 0) {
                    alert("清理缓存成功");
                    window.location.href=window.location.href;
                } else {
                    alert("清理缓存失败");
                    window.location.href=window.location.href;
                }
            },error:function (data) {
                alert("清理缓存失败");
            }
        });
    }
</script>

<body>
    <div class="container">
        <input class="btn-info" type="button" value="添加记录" onclick="AddDnsInfo()">
        <input class="btn-info" type="button" value="清理缓存" onclick="flushCache()">
    </div>

    <br />

    <div class="container" style="text-algn:center">
        <table border="1" id="dnsMainTable" class="table table-borderless">

        </table>
    </div>
</body>
</html>